<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  <!-- Quality selector -->
  <script src='https://cdn.jsdelivr.net/npm/@clappr/hlsjs-playback@latest/dist/hlsjs-playback.min.js'></script>

  <script type="text/javascript" src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
  <style type="text/css">
    .divVideo{
        position:relative;
        width:100%;
        padding-bottom:40%; 
    }
    video{
        position:absolute;
        left:1%;
        top:0;
        width:50%; 
        object-fit: fill;
    }
      </style>
</head>

<body>
  <div id="player"></div>
  <script>
    // Clappr.Log.setLevel(Clappr.Log.LEVEL_DEBUG);
    var player = new Clappr.Player({
      source: "./live.m3u8",
     // sources: ['./live.m3u8','./manifest.mpd','./master.m3u8'],
      parentId: "#player",
      mute: false,
      autoPlay: true,
      plugins: [LevelSelector,HlsjsPlayback],
      hlsUseNextLevel: false,
    hlsMinimumDvrSize: 60,
    hlsRecoverAttempts: 16,
    playback: {
      extrapolatedWindowNumSegments: 2,
      triggerFatalErrorOnResourceDenied: false,
      hlsjsConfig: {
        // hls.js specific options
      },
      levelSelectorConfig: {
        title: '動画品質',
      },
    }});
  </script>
</body>
